<template>
	<s-layout title="个人信息" :bgStyle="{
		color:'#F6F6F6'
	}">
		<view class="container">
			<view class="user-box ss-p-x-30 ss-flex ss-p-y-30">
				<view class="user-item ss-flex flex-column justify-center align-center ss-m-r-45">
					<image class="user-item-image"
						:src="cdn(chatInfo.userProfile.avatar) || 'http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png'"
						mode="aspectFill"></image>
					<view class="user-item-text ss-m-t-10 ss-line-1">{{chatInfo.userProfile.nick || '未设置'}}</view>
				</view>
				<view class="user-item ss-flex flex-column justify-center align-center" @click="createGroup">
					<image class="user-item-image"
						src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250108/7862f0f43fd9316d3cc7dc49de938f92.png"
						mode="aspectFill"></image>
					<view class="user-item-text ss-m-t-10 ss-line-1"></view>
				</view>
			</view>
			<view class="top ss-flex justify-between align-center ss-p-y-20 ss-p-x-30 ss-m-t-40">
				<view>置顶聊天</view>
				<switch :checked="top" @change="changeTop" color="#47C262" style="transform:scale(0.7)" />
			</view>
			<view class="action-list">
				<view class="send-messsage ss-m-b-20" style="color: #3662EC;" @click="sendMessage">发送消息</view>
				<view class="send-messsage " @click="deleteFriend" v-if="!isFriend">删除好友</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		cdn,
		udid
	} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'

	const isFriend = computed(() => $store().isFriend);
	const chatInfo = computed(() => $store().chatInfo);
	const iMMyInfo = computed(() => $store().userInfo);
	const type = ref('')
	const top = ref(false)

	onLoad((options) => {
		if (options && options.type) {
			type.value = options.type
		}
		getTop()
	})

	const getTop = async () => {
		const {
			code,
			data
		} = await imApi.getTop({
			type: 'msg',
			group_id: '',
			from_account: iMMyInfo.value.userID,
			to_account: chatInfo.value.userProfile.userID,
		})

		if (code === 0) {
			if (data.status === 1) {
				top.value = true
			} else {
				top.value = false
			}
		}
	}

	const changeTop = async (e) => {
		const {
			code
		} = await imApi.setTop({
			type: 'msg',
			group_id: '',
			from_account: iMMyInfo.value.userID,
			to_account: chatInfo.value.userProfile.userID,
		})

		if (code === 0) {
			$store().setTop(chatInfo.value.userProfile.userID, top.value == 1 ? 0 : 1)
			uni.showToast({
				title: '设置成功',
				duration: 1000,
				icon: 'none'
			})
		}
	}

	const createGroup = async () => {
		const {
			code,
			data
		} = await imApi.createGroup({
			im_id: iMMyInfo.value.userID,
			platform: udid === 'hotel' ? 'hl' : udid,
			name: `${iMMyInfo.value.nick}的群`,
			groupImg: cdn(iMMyInfo.value.avatar),
			notification: '',
			im_id_arr: [chatInfo.value.userProfile.userID]
		})

		if (code === 0) {
			uni.showToast({
				title: '创建成功，请前往我的群聊查看!',
				duration: 1500,
				icon: 'none'
			})
		}
	}

	const deleteFriend = () => {
		wx.showModal({
			title: '提示',
			content: '是否确定删除好友？删除之后聊天记录将无法恢复!',
			success(res) {
				if (res.confirm) {
					wx.$app.deleteFriend({
						userIDList: [chatInfo.value.userProfile.userID],
						type: wx.TIM.TYPES.SNS_DELETE_TYPE_BOTH
					}).then(res => {
						uni.reLaunch({
							url: '/im/index'
						})
					})
				}
			}
		})
	}

	// 发送消息
	function sendMessage() {
		if (type.value === 'chat') {
			uni.navigateBack({
				delta: 1
			})
		} else {
			$store().getChatInfo(chatInfo.value.conversationID, 'chat')
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1 !important;
	}

	.container {
		width: calc(100% - 48rpx);
		height: 100%;
		// height: 100vh;
		overflow-y: hidden;
		padding: 24rpx;
		background-color: #f1f1f1;
	}

	.user-box {
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;

		.user-item {
			.user-item-image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
			}

			.user-item-text {
				width: 80rpx;
				height: 30rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 30rpx;
			}
		}


	}

	.user-item-con {
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;

			.item-name {
				font-size: 28rpx;
			}
		}
	}

	.action-list {
		width: calc(100% - 48rpx);

		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 10rpx 0;
		position: fixed;
		bottom: 40rpx;
		left: 24rpx;

		.send-messsage {

			// padding: 15rpx 0;
			height: 86rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			color: red;
			border: none !important;
			border-radius: 10rpx;
		}
	}

	.top {
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
</style>